<template>
	<view >
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">碳核算报告</view>
			</block>
		</cu-custom>
		<view class="padding-32">
			<view class="manage-top-content">
				<view :class="selTab==index?'sel':'unsel'" v-for="(item,index) in tabList" :key="index" @click="selTab=index">
				  {{item.name}}
				</view>
			</view>			
			<view class="model-content-not" v-for="(item,index) in 3" :key="index"
				:style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/mxBg.png)'}]" v-if="selTab == 0">
					<view class="flex align-center justify-between">
						<view class="title">碳排放核算模型1</view>
						<view class="num">数量：8</view>
					</view>
					<view class="padding-top-24 flex align-start justify-start">
						<view>
							<image src="https://txr001.zthj.net/static/img/nyhySm.png" class="nyhy-img"></image>
						</view>
						<view class="padding-left-sm" style="width: 100%;">
							<view class="text-666 text-sm">模型提供：能源企业</view>
							<view class="padding-top-14 flex" >
								<view class="flex-sub bz-title">
									<view class="padding-left-sm">3</view>
									<view>深度</view>
								</view>
								<view class="flex-sub bz-title">
									<view class="padding-left-sm">1</view>
									<view>范围</view>
								</view>
								<view class="flex-sub bz-title">
									<view class="padding-left-xs"><text class="text-img-center">国标</text>
									<image src="https://txr001.zthj.net/static/img/question.png" class="img-22 margin-left-8"></image>
									</view>
									<view>核算标准</view>
								</view>
							</view>
							<view class="padding-top-32 flex align-center justify-start">
								<button class="cu-btn sy-btn">立即使用</button>
								<button class="cu-btn zs-btn" @click="modalName='Image'">赠送</button>
							</view>
						</view>
					</view>
				</view>
			
			<view class="model-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/mxBg.png)'}]" v-if="selTab == 1">
				<view class="flex align-start justify-start">
					<view>
						<image src="https://txr001.zthj.net/static/img/nyhySm.png" class="nyhy-img"></image>
					</view>
					<view class="padding-left-sm" style="width: 100%;">
						<view class="title">碳排放核算报告</view>
						<view class="time">生成时间：2023-09-12</view>
						<view class="padding-top-38 ">
							<button class="cu-btn sy-btn" @click="lookReport" style="width:400rpx">查看报告</button>
						</view>
					</view>
				</view>
				<image src="https://txr001.zthj.net/static/img/yrz.png" class="rz-img"></image>
			</view>
			<view class="model-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/mxBg.png)'}]" v-if="selTab == 2">
				<view class="flex align-start justify-start">
					<view>
						<image src="https://txr001.zthj.net/static/img/nyhySm.png" class="nyhy-img"></image>
					</view>
					<view class="padding-left-sm" style="width: 100%;">
						<view class="title">碳排放核算报告</view>
						<view class="time">生成时间：2023-09-12</view>
						<view class="padding-top-32 flex align-center justify-start">
							<button class="cu-btn sy-btn" @click="lookReport">查看报告</button>
							<button class="cu-btn zs-btn" style="width: 200rpx;">认证</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selTab:0,
				tabList:[
					{name:"未使用",value:"1"},
					// {name:"碳足迹&碳排放",value:"2"},
					{name:"已使用",value:"3"},
				]
			}
		},
		onLoad() {},
		methods: {
			lookReport(){
				uni.navigateTo({
					url:"/pages/carAccount/report"
				})
			},
			toLookProcess(){
				uni.navigateTo({
					url:"/pages/carAccount/repostProgress"
				})
			}
		}
	}
</script>

<style>
	page{background: linear-gradient(180deg, rgba(244,244,244,0) 10%, #F4F4F4 19%);}
</style>
<style lang="less" scoped>
	.manage-top-content{
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		// width: 700rpx;
		overflow-y: scroll;
		.sel{
			padding: 0 16rpx;
			height: 50rpx;
			line-height:50rpx;
			background: #010101;
			border-radius: 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
		}
		.unsel{
			// min-width: 224rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #010101;
			text-align: center;
			// margin-right: 60rpx;
		}
	}
	.model-content{
		background-size: 100% 100%;
		height: 260rpx;
		width: 100%;
		padding: 32rpx;
		margin-bottom: 32rpx;
		position: relative;
		.nyhy-img{
			width: 140rpx;
			height: 184rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}
		
		.time{
			padding-top: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
		.sy-btn{
			width: 200rpx;
			height: 52rpx;
			background: #5397F4;
			border-radius: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
		.zs-btn{
			padding: 0 32rpx;
			height: 52rpx;
			background: #00D282;
			border-radius: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 32rpx;
		}
		
		.rz-img{
			position: absolute;
			right: 48rpx;
			top: 0;
			width: 32rpx;
			height: 74rpx;
		}
	}

	.model-content-not{
		background-size: 100% 100%;
		height: 332rpx;
		width: 100%;
		padding: 32rpx;
		margin-bottom: 32rpx;
		.title{
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}
		.num{
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
		}
		.nyhy-img{
			width: 140rpx;
			height: 184rpx;
		}
		.bz-title{
			font-size: 24rpx;
			font-weight: 400;
			color: #808080;
		}
		.sy-btn{
			width: 200rpx;
			height: 52rpx;
			background: #5397F4;
			border-radius: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
		.zs-btn{
			width: 200rpx;
			height: 52rpx;
			background: #00D282;
			border-radius: 80rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 32rpx;
		}
	}
</style>